{% extends 'layout/baseSite.html' %}
{% load static %}
{% block title %}可视化界面{% endblock %}
{% block title2 %}可视化界面{% endblock %}
{% block birc %}可视化界面{% endblock %}

{% block css %}
    <style>
        .searchBtn{
            border-radius: 5px;
            outline: none;
            border: 1px solid #ddd;
            padding: 5px 8px;
            background: #fff;
            margin-bottom: 10px;
        }
        .searchBtn:hover{
            background: #ddd;
        }
        .wrapper{
            width: 600px;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        }
        .wrapper .input-data{
            width: 100%;
            height: 40px;
            position: relative;
        }
        .wrapper .input-data input{
            width: 100%;
            height: 100%;
            border: none;
            border-bottom: 2px solid silver;
            font-size: 17px;
        }
        .input-data input:focus ~ label,
        .input-data input:valid ~ label{
            transform: translateY(-20px);
            font-size: 20px;
            color: #4158D0;
        }
        .wrapper .input-data label{
            position: absolute;
            bottom: 10px;
            left: 0;
            color: grey;
            pointer-events: none;
            transition: all 0.3s ease;
        }
        .wrapper .input-data .underline{
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 100%;
        }
        .input-data .underline:before{
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            background: #4158D0;
            transform: scaleX(0);
            transition:transform 0.3s ease;
        }

        .input-data input:focus ~ .underline:before,
        .input-data input:valid ~ .underline:before{
            transform: scaleX(1);
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
      <div style="width: fit-content;margin: 30px auto;text-align: center;">
          <h3>欢迎来到可视化界面</h3>
      </div>
    </div>
    <div class="row" style="width: 600px;padding-left: 300px">
                <div class="col-12">
                    <div class="wrapper">
                        <div class="input-data" style="width: 500px">
                            <input type="text" required="" name="sendValue"/>
                            <div class="underline"></div>
                            <label>请输入想要查询的疾病名称：</label>
                        </div>
                        <br>
                        <button class="searchBtn">查询</button>
                    </div>
                </div>
            </div>
    <br>
    <div id="chart-panel" style="height: 100%;width: 100%;overflow: hidden;"></div>
    <script type="text/javascript">
      $("#visGo").addClass("active");

      $.ajaxSetup({
 　　　　data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
 　　})

      $(".searchBtn").click(function(){
          var name = $("input[name=sendValue]").val();

          window.location.href = "/web/visualization/graph?name=" + name;
      });
    </script>
<script type="text/javascript" src="{% static '/js/echarts.js' %}"></script>
<script type="text/javascript" src="{% static '/js/jquery.min.js' %}"></script>
<script type="text/javascript">
    if(!neo4j_data){
        var neo4j_data = [{{ neo4j_data|safe }}];
    }
    var data1 = neo4j_data[0]['data'];
    var links1 = neo4j_data[0]['links'];
    console.log(data1);
    console.log(links1);
    var dom = document.getElementById("chart-panel");
    var myChart1 = echarts.init(dom);
    var categories1 = [{name: "检查"}, {name: "科室"}, {name: "疾病"},{name: "医药"}, {name: "食物"}, {name: "生产厂家"}, {name: "病症"}];
    var option;
    option = {
        // 图的标题
        title: {
            text: '寻医问药知识图谱'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories1.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            name: '寻医问药知识图谱',
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 50, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 700,
                edgeLength: [20, 100],
                layoutAnimation: false
            },
            draggable: true,
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0.3
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: data1,
            links: links1,
            categories: categories1,
        }]
    };
    myChart1.setOption(option);
    </script>
{% endblock %}